import {useState, useEffect, useCallback} from 'react'

export default (imgurl) => {
  const [canvasNode, setCanvasNode] = useState(null)
  const canvasRef = useCallback(node => setCanvasNode(node), [])
  useEffect(() => {
    if(canvasNode) {
      const ctx = canvasNode.getContext('2d')
      const img = new Image()
      img.src = imgurl
      img.addEventListener('load', function() {
        ctx.drawImage(img, 0, 0, 300, 300)
        ctx.font = '28px serif'
        ctx.fillText('认脸', 124, 142)
        ctx.fillText('达人', 124, 172)
      })
    }
  }, [canvasNode, imgurl])
  return canvasRef
}
